<template>
  <!-- <persons/> 人物主页组件-->
  <div class="continer">
    <div class="dynamic_titles">
      <div class="dynamic_dynamic_s">
        <div
          class="friend_dynamics"
          :class="is_selected_dyanamic ? 'selected_dyanamic' : ''"
          @click="friend_dynamics()"
        >
          <div>好友动态</div>
        </div>
        <div
          class="friend_dynamics"
          :class="is_selected_dyanamic ? '' : 'selected_dyanamic'"
          @click="online_line()"
        >
          <div>在线</div>
        </div>
      </div>
    </div>
    <!-- 引入在线组件 -->
    <onlines v-if="is_selected_dyanamic == false" />
    <div class="dynamic_sections" v-if="is_selected_dyanamic">
      <div
        class="dynamic_content"
        v-for="(item, index) in allList"
        :key="index"
      >
        <div class="person_nav">
          <!--用户的头像 -->
          <div
            @click="user_persons_imgs()"
            class="persons_imgs"
            :style="{
              backgroundImage: 'url(' + item.MemberHeadImg + ')',
              backgroundRepeat: 'no-repeat',
            }"
          >
            <img src="../assets/personal/person_memer.png" />
          </div>
          <!-- 用户的昵称 时间-->
          <div>
            <div>
              <h4>{{ item.MemberName || "maliya" }}</h4>
              <p>{{ item.AddTime || "2小时前" }}</p>
            </div>
          </div>
        </div>
        <!-- 动态的内容 -->
        <div class="Dynamic_contents">
          <!-- dynamic.png -->
          <div class="Dynamic_Dynamic">
            <div
              class="Dynamic_pictures"
              v-for="(i, cindex) in item.Imgs"
              :key="cindex"
            >
              <div>
                <img :src="i.DisplayUrl" />
              </div>
              <!--  -->
              <div>
                <img :src="i.PreivewUrl" />
              </div>
            </div>
            <!--  -->
            <div class="publish_content">{{ item.Content }}</div>
            <!-- 评论区 -->
            <div class="review_review">
              <div class="comment_comment">
                <!--点赞  -->
                <div>
                  <img src="../assets/personal/dynamic_humbs-up.png" />
                  <span>{{ item.LikeCount }}</span>
                </div>
                <!-- 评论 -->
                <div @click="comment(item)">
                  <img src="../assets/personal/dynamic_commentunable.png" />
                  <span>{{ item.PingLunCount }}</span>
                </div>
                <div @click="Illegal()">
                  <img src="../assets/personal/complaint.png" />
                </div>
              </div>
              <div><img src="../assets/personal/zytrans.png" /></div>
            </div>
            <!-- 评论列表 -->
            <div class="comment_list" v-if="item.show">
              <div class="header_imgs">
                <img src="../assets/personal/holyia.png" />
              </div>
              <div>
                <h4>holyia</h4>
                <div class="issue_opinion">还不错啊</div>
                <p>本周一08:28</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- </div> -->
    <!-- </div> -->
    <IllegalReporting @closes="close_complain" v-if="is_complaint" />
  </div>
</template> 
<script>
import { getAllList } from "../utils/http.js";
export default {
  name: "Dynamic",
  data: () => ({
    is_complaint: false,
    is_selected_dyanamic: true,
    allList: [],
    show: true,
  }),
  created() {
    this.$on("friend_dy", (res) => {
      console.log(res);
      console.log("a");
    });
    this.getpage();
  },
  mounted() {},
  methods: {
    //弹窗事件
    comment(item) {
      console.log(item, "item");
      item.show = !item.show;
    },
    friend_dynamics() {
      this.is_selected_dyanamic = true;
      this.$emit("friend_dy");
    },
    online_line() {
      this.is_selected_dyanamic = false;
      this.$emit("ononline");
    },
    getpage() {
      var param = {
        Page: 1,
        Language: "zh-cn",
      };
      getAllList(param).then((res) => {
        this.allList = res.Obj.List;
        console.log(res.Obj.List, "544444444444444");
      });
    },
    Illegal() {
      //举报、投诉
      this.is_complaint = true;
    },
    close_complain() {
      this.is_complaint = false;
    },
    //用户头像的点击事件
    user_persons_imgs() {
      this.$emit("head_portrait");
    },
  },
  computed: {
    userId() {
      // 这里是获取vuex中存取的值， 。state。模块名称。是固定用法
      // user_id就是在vuex的js文件中存储值的变量
      return this.$store.state.user.user_id;
    },
  },
};
</script>
<style >
html {
  background-color: #eff2fc;
}
</style>
<style scoped>
.continer {
  width: 73%;
}
.dynamic_sections {
  background-color: #ffffff;
}
.dynamic_content {
  padding-top: 1rem;
  width: 95%;
  margin: 0 auto;
}
.dynamic_titles {
  width: 100%;
  background-color: #ffffff;
}
.dynamic_dynamic_s {
  display: flex;
  width: 28%;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 10px;
}
.person_nav {
  display: flex;
  align-items: center;
}
.person_nav h4 {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #0e0e0e;
}
.person_nav p {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-top: 0.1rem;
}
.persons_imgs {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  margin-right: 15px;
  background-size: cover;
  border: 1px solid #f7f4cc;
}
.persons_imgs img {
  position: absolute;
  left: 1.9rem;
  bottom: 0;
}
.Dynamic_Dynamic {
  width: 87%;
  margin: 0 auto;
}
.Dynamic_pictures {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  justify-content: space-around;
}
.Dynamic_pictures img {
  width: 360px;
  height: 360px;
  border-radius: 10px;
}
.publish_content {
  width: 98%;
  margin: 10px auto;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.review_review {
  width: 95%;
  margin: 0 auto 20px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comment_comment {
  display: flex;
  align-items: center;
  width: 20%;
  justify-content: space-between;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
.comment_list {
  width: 98%;
  margin: 12px auto;
  display: flex;
}
.comment_list h4 {
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #4064e3;
}
.header_imgs {
  margin-right: 1rem;
}
.issue_opinion {
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-bottom: 5px;
  margin-top: 5px;
}
.comment_list p {
  font-size: 12px;
  font-family: PingFa;
  font-weight: 500;
  color: #999999;
  margin-top: 0.1rem;
}
.friend_dynamics {
  padding-bottom: 10px;
  padding-top: 10px;
  color: #999999;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  border-bottom: 2px solid #ffffff;
}
.selected_dyanamic {
  color: #4064e3;
  border-bottom: 2px solid #4064e3;
}
</style>